<template>
    <div class="ImportSubmissionWrap">
        <a-button @click="handCLick">送检批量导入</a-button>
        <a-modal title="送检批量导入" :visible="visible" @cancel="handleCancel" :width="800">
            <div class="modalInfoWrap">
                <div class="modalInfoWrap-upload">
                    <a-upload-dragger name="file" :multiple="false" :action="updateFile" @change="handleChange"
                        :data="{}" :fileList="fileList" :before-upload="beforeUpload">
                        <p class="ant-upload-drag-icon">
                            <a-icon type="inbox" />
                        </p>
                        <p class="ant-upload-text">
                            点击或拖拽到此处上传
                        </p>
                        <p class="ant-upload-hint">
                            仅支持xls文件且单文件上传
                        </p>
                    </a-upload-dragger>
                </div>
            </div>
            <template slot="footer">
                <div class="modalInfoWrap-pagination">
                    <a-button @click="templateDown">模板下载</a-button>
                    <a-space>
                        <a-button @click="handleCancel">取消</a-button>
                        <a-button type="primary" @click="handSubmit" :loading="loading || confirmLoading">确定</a-button>
                    </a-space>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
export default {
    name: 'ImportSubmission', props: {
        menuId: {
            type: [String, Number],
        },
        otherData: {
            type: Object,
            default: () => { }
        },
        onCallBack: {
            type: Function,
            default: () => { }
        },
    },
    data() {
        return {
            visible: false,
            fileList: [],
            updateFile: '',
            submitLoading: false,
            loading: false,
            confirmLoading: false,
        }
    },
    mounted() {
        this.updateFile = this.$updateFireFileMHQ;
    },
    methods: {
        handCLick() {
            this.visible = true;
        },
        handleCancel() {
            this.visible = false;
            this.fileList = [];
            this.submitLoading = false;
        },
        handleChange(e) {
            let list = e.fileList;
            if (['application/vnd.ms-excel'].includes(e.file.type)) {
                if (e.file.status === 'uploading') {
                    this.fileList = e.fileList
                    this.loading = true;
                    return;
                } else if (['done', 'error'].includes(e.file.status)) {
                    this.loading = false;
                    if (list.length > 1) {
                        list = list.slice(-1);
                    }
                    this.fileList = list.filter(v => {
                        if (v.response && v.response.code != 200) {
                            this.$message.error(v.response.msg || "文件上传错误,请重新上传");
                            return false
                        } else {
                            // this.$message.success(v.response.data || v.response.msg || "导入成功");
                            return v;
                        }
                    });
                }
            }
            if (e.file.status == "removed") {
                this.fileList = e.fileList
            }

        },
        beforeUpload(file) {
            if (['application/vnd.ms-excel'].includes(file.type)) {
                return true;
            } else {
                this.$message.error('文件格式错误');
                return false;
            }
        },
        // 模板下载
        templateDown() {
            window.location.href = this.$downloadTemplateMHQ;
        },
        // 导入
        handSubmit() {
            let list = this.fileList.filter(v => (v.response && v.response.code == 200)).map(v => v.response.data);
            if (list.length == 0) {
                this.$message.error('请重新上传文件');
                return false;
            }
            let params = {
                filePath: list.join(','),
            };
            this.confirmLoading = true;
            this.getAxios(this.$updateInspectionTimeMHQ, params).then((res) => {
                if (res.code == 200) {
                    this.$message.success({
                        content: res.data || res.msg,
                        duration: 2.5,
                    });
                    this.handleCancel();
                    this.onCallBack();
                }
            }).catch(() => {
            }).finally(() => {
                this.confirmLoading = false;
            })
        }
    },
}
</script>
<style lang="less" scoped>
.ImportSubmissionWrap {}

.modalInfoWrap {
    height: 30vh;

    &-upload {
        height: 20vh;
    }

    &-pagination {
        display: flex;
        justify-content: space-between;
    }
}
</style>